<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>SEG</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery-2.0.3.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>
		<link href="../../static/custom/custom.css" th:href="@{/static/custom/custom.css}" rel="stylesheet"/>


		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->		
	</head>

	<body tiles:fragment="content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
			<ul class="breadcrumb">
				<li>
					<i class="fa fa-home home-icon"></i>								
					<a href='/' th:href="@{/}">Inicio</a>
				</li>
				<li class="active">Consulta de Usuarios</li>
			</ul><!-- .breadcrumb -->
		</div>			
		<div class="page-content">
			<div class="page-header">
				<h1>
					Mantenimiento de Usuarios
					<small>
						<i class="fa fa-angle-double-right"></i>
						Consulta de Usuarios
					</small>
				</h1>
			</div><!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">	
					<input type="hidden" id="flagErrorNuevo" th:value="${errorNuevo}"/>
					<input type="hidden" id="flagErrorEdicion" th:value="${errorEdicion}"/>
					<div th:if="${mensajeNuevo}" class="col-sm-11">		
						<div class="alert alert-info col-sm-6">
							<button type="button" class="close" data-dismiss="alert">
								<i class="ace-icon fa fa-times"></i>
							</button>
							<p>
								Se ha agregado exitosamente un nuevo usuario.
							</p>
						</div>	
					</div>
					<div th:if="${mensajeEdicion}" class="col-sm-11">		
						<div class="alert alert-info col-sm-6">
							<button type="button" class="close" data-dismiss="alert">
								<i class="ace-icon fa fa-times"></i>
							</button>
							<p>
								Se ha editado exitosamente un usuario.
							</p>
						</div>	
					</div>
					<div th:if="${mensajeBaja}" class="col-sm-11">		
						<div class="alert alert-info col-sm-6">
							<button type="button" class="close" data-dismiss="alert">
								<i class="ace-icon fa fa-times"></i>
							</button>
							<p>
								Se ha dado de baja exitosamente un usuario.
							</p>
						</div>	
					</div>		
					<div th:if="${mensajePassword}" class="col-sm-11">		
						<div class="alert alert-info col-sm-6">
							<button type="button" class="close" data-dismiss="alert">
								<i class="ace-icon fa fa-times"></i>
							</button>
							<p>
								Se ha modificado la contrase&ntilde;a de un usuario.
							</p>
						</div>	
					</div>					
					<div class="col-sm-11 no-padding">						
						<div id="accordion" class="accordion-style1 panel-group col-sm-12">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
											<i class="ace-icon fa fa-angle-down bigger-110" data-icon-hide="ace-icon fa fa-angle-down" data-icon-show="ace-icon fa fa-angle-right"></i>
											&nbsp;Filtros de b&uacute;squeda
										</a>
									</h4>
								</div>

								<div class="panel-collapse collapse in" id="collapseOne" >
									<div class="panel-body">
										<div class="row">
											<div class="col-xs-12">
												<div class="col-xs-4">
													<label for="fUsuario" class="small col-xs-5 text-right">Nombre de Usuario</label>
													<div class="col-xs-7">
														<input type="text" id="fUsuario" class="form-control ultra-small align-left"/>
													</div>
												</div>
												<div class="col-xs-4">
													<label for="fTipo" class="small col-xs-5 text-right">Tipo de Usuario</label>
													<div class="col-xs-7">
														<select class='form-control xs-small' id="fTipo" data-placeholder=' '>
															<option value=''>Todos</option>														
															<option value='Persona'>Persona</option>
															<option value='Empresa'>Empresa</option>
															<option value='Otro'>Otro</option>
														</select>
													</div>
												</div>												
												<div class="col-xs-4">
													<label for="fDniRuc" class="small col-xs-5 text-right">DNI / RUC</label>
													<div class="col-xs-7">
														<input type="text" id="fDniRuc" class="form-control ultra-small align-left"/>
													</div>
												</div>
												<div class="space col-xs-12"></div>
												<div class="col-xs-4">
													<label for="fNombre" class="small col-xs-5 text-right">Nombre / Raz&oacute;n Social</label>
													<div class="col-xs-7">
														<input type="text" id="fNombre" class="form-control ultra-small align-left"/>		
													</div>
												</div>
												
												<div class="col-xs-4">
													<label for="fCorreo" class="small col-xs-5 text-right">Correo</label>
													<div class="col-xs-7">
														<input type="text" id="fCorreo" class="form-control ultra-small align-left"/>	
													</div>
												</div>
												<div class="col-xs-4">												
													<p class=" pull-right">
														<button type="button" class="btn btn-light btn-sm" id="botonLimpiar">Limpiar</button>
													</p>
												</div>
											</div>											
										</div>
									</div>
								</div>
							</div>							
						</div>
						<div class="space col-sm-12"></div>				
					</div>
					<div class="col-sm-11">	
						<div class="table-header">
							<div class="btn-group">
								<button class="btn btn-sm btn-info btnDisable" id="btnNuevoUsuario"><i class="ace-icon fa fa-file-o align-top bigger-125"></i>&nbsp;Nuevo</button>
								<button class="btn btn-sm btn-info btnDisable disabled" id="btnEditarUsuario"><i class="ace-icon fa fa-pencil align-top bigger-125"></i>&nbsp;Editar</button>
								<button type="button" class="btn btn-sm btn-info btnDisable disabled" id="btnCambiarPassword"><i class="ace-icon fa fa-lock align-top bigger-125"></i>&nbsp;Cambiar Contrase&ntilde;a</button>
								<button type="button" class="btn btn-sm btn-info btnDisable disabled" id="btnBaja"><i class="ace-icon fa fa-times align-top bigger-125"></i>&nbsp;Dar de Baja</button>
							</div>
						</div>
						<div class="table-responsive " id="tableHolder">							
							<table id="tabla-usuarios" class="table table-bordered table-hover table-condensed">
								<thead>
									<tr>
										<th></th>
										<th>Login</th>
										<th>Tipo de usuario</th>
										<th>Perfil</th>
										<th>DNI / RUC</th>
										<th>Nombre / Raz&oacute;n Social</th>
										<th>Correo</th>
										<th>Aprobado</th>	
										<th hidden="hidden">Cod Persona/Empresa</th>	
										<th hidden="hidden">Perfil Id</th>	
									</tr>
								</thead>
								<tbody>
									<tr th:each="usuario : ${usuarios}">
										<td class="center">
											<label>
												<input type="radio" name="chkUsuario" class="ace" th:value="${usuario.id}"/>
												<span class="lbl"></span>
											</label>
										</td>
										<td class="vertical-center" th:text="${usuario.login}">admin</td>
										<td class="vertical-center" th:text="${usuario.tipo}">Persona</td>
										<td class="vertical-center" th:text="${usuario.perfil.descripcion}">Administrador</td>
										<td class="vertical-center" th:text="${usuario.dniORuc}">23548652</td>
										<td class="vertical-center" th:text="${usuario.nombresORazonSocial}">Ricardo Perez</td>
										<td class="vertical-center" th:text="${usuario.correo}">ricardo@perez.com</td>
										<td class="vertical-center"><i th:if="${usuario.flagActivo}" class='fa fa-check green'></i></td>
										<td hidden="hidden" class="vertical-center" th:text="${usuario.codigoPersonaEmpresa}">1</td>
										<td hidden="hidden" class="vertical-center" th:text="${usuario.perfil.id}">1</td>
									</tr>
								</tbody>
							</table>
						</div>						
					</div>
					<div id="modal-baja" class="modal" tabindex="-1">
						<div class="space"></div>
						<div class="space"></div>
						<div class="space"></div>
						<div class="modal-content col-md-4 col-md-offset-4" >
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<h4 class="blue bigger">Confirma baja de usuario</h4>
							</div>
							<div class="modal-body overflow-visible">
								<div class="row">
									<div class="col-xs-12">				
										<p>&iquest;Desea realmente dar de baja al usuario seleccionado?</p>
									</div>
								</div>
							</div>	
							<div class="modal-footer">	
								<form th:action="@{/darBajaUsuario}" method="POST">
									<input type="hidden" id="submitIdBaja" name="id" value=""/>							
									<button type="submit" class="btn btn-sm btn-primary">
										<i class="fa fa-check"></i>
										<span>Confirmar</span>
									</button>								
									<button class="btn btn-sm" data-dismiss="modal">											
										Salir
									</button>
								</form>
							</div>
						</div>
					</div><!-- fin modal -->
					<div id="modal-cambiarPassword" class="modal" tabindex="-1">
						<div class="space"></div>
						<div class="space"></div>
						<div class="space"></div>
						<div class="modal-content col-md-4 col-md-offset-4">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">&times;</button>															
								<h4 class="blue bigger"><i class="fa fa-plus"></i>
								Cambiar contrase&ntilde;a</h4>
							</div>
							<form th:action="@{/cambiarPasswordUsuario}" method="POST" id="formCambiarPassword">
								<div class="modal-body overflow-visible">
									<div class="row">				
										<div class="col-xs-10 col-xs-offset-1">					
											<div class="form-group">
												<label for="password">Ingrese la nueva contrase&ntilde;a</label>				
												<div>
													<input type="password" id="password" name="password" class="btn-block"/>
												</div>
											</div>
										</div>
									</div>
								</div>								
								<div class="modal-footer">										
									<input type="hidden" id="submitIdCambiarPassword" name="id" value=""/>							
									<button type="button" id="btnConfirmarCambioPassword" class="btn btn-sm btn-primary">
										<i class="fa fa-check"></i>
										<span>Confirmar</span>
									</button>								
									<button class="btn btn-sm" data-dismiss="modal">											
										Salir
									</button>									
								</div>
							</form>
						</div>
					</div><!-- fin modal -->
					<div id="modal-usuario" class="modal" tabindex="-1">
						<div class="space-10"></div>
						<div class="modal-content col-md-6 col-md-offset-3" >
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<h4 class="blue bigger" id="tituloModalUsuario">Usuario</h4>
							</div>	
							<form id="formSubmitUsuario" action="#" th:object="${usuario}" method="post" autocomplete="off">				
								<div class="modal-body overflow-visible">
									<div class="row">
										<input type="hidden" th:value="${usuario.id}" name="id" id="campoId"/>
										<div class="row">
											<div th:if="${errors}" class="col-xs-10 col-xs-offset-1">		
												<div class="alert alert-danger col-sm-12" id="divError">
													<button type="button" class="close" data-dismiss="alert">
														<i class="ace-icon fa fa-times"></i>
													</button>
													<strong>
														<i class="ace-icon fa fa-times"></i>
														Error!
													</strong>
													<ul th:each="err : ${errors}">
														<li th:text="${err.defaultMessage}">...</li>
													</ul>
												</div>
												<div class="space"></div>	
											</div>
											<div class="col-xs-10 col-xs-offset-1">	
												<input type="text" value="" style="display:none;" />      <!-- previene autofill -->
												<input type="password" value="" style="display:none;" />  <!-- previene autofill -->								
												<div class="form-group">
													<label for="campoLogin">Login</label>
													<input th:field="*{login}" class="form-control" id="campoLogin" required="required"/>
												</div>
												<div class="form-group" id="divPassword">
													<label for="campoPassword">Contrase&ntilde;a</label>
													<input type="password" th:field="*{password}" class="form-control" id="campoPassword"/>
												</div>
												<div class="form-group">
													<label for="campoCorreo">Correo electr&oacute;nico</label>
													<input th:field="*{correo}" class="form-control" id="campoCorreo" type="email" required="required"/>
												</div>
												<div class="form-group col-xs-12 no-padding">
													<label class="col-xs-12 no-padding" for="campoTipo">Tipo de usuario</label>
													<span class="col-xs-6 no-padding-left"> 
														<select  th:field="*{tipo}" class="form-control col-xs-6 no-padding-left" id="campoTipo">
															<option value='Otro'>Otro</option>
															<option value='Persona'>Persona</option>
															<option value='Empresa'>Empresa</option>																	
														</select> 
													</span>
													<div class="col-xs-6 input-group" id="divPersona" th:classappend="${usuario.tipo != 'Persona'} ? 'noDisplay'">
														<input class="form-control ui-autocomplete-input noStyle" placeholder="Relacione Persona" th:field="*{persona.id}" id="inputPersona" readonly="readonly"/>
														<span class="input-group-btn">
															<button type="button" id="btnBuscarPersona" class="btn btn-purple btn-sm btn-block" >
																<i class="fa fa-search "></i>
															</button>
														</span>
													</div>
													<div class="col-xs-6 input-group" id="divEmpresa" th:classappend="${usuario.tipo != 'Empresa'} ? 'noDisplay'">
														<input class="form-control ui-autocomplete-input noStyle" placeholder="Relacione Empresa" th:field="*{empresa.id}" id="inputEmpresa" readonly="readonly"/>
														<span class="input-group-btn">
															<button type="button" id="btnBuscarEmpresa" class="btn btn-purple btn-sm btn-block">
																<i class="fa fa-search "></i>
															</button>																	
														</span>
													</div>
												</div>														
												<div class="form-group">														
													<label class="col-xs-12 no-padding" for="campoPerfil">Perfil de usuario</label>
													<span class="col-xs-6 no-padding-left">
														<select  th:field="*{perfil.id}" class="form-control" id="campoPerfil">
															<option th:each="perfil : ${listaPerfiles}" th:value="${perfil.id}" th:text="${perfil.descripcion}">Administrador</option>
														</select> 
													</span>
												</div>	
												<div class="form-group">
													<div class="space col-xs-12"></div>
													<label class="col-xs-12 no-padding">
														<input class="ace" type="checkbox" th:field="*{flagActivo}" id="campoActivo"/>																			
														<span class="lbl"> Usuario Autorizado</span>
													</label>																			
												</div>														
											</div>
										</div>									
									</div>																	
								</div>					
								<div class="modal-footer">
									<button type="submit" class="btn btn-success btn-sm">
										<i class="fa fa-check align-top"></i>
										Guardar
									</button>									
									<button class="btn btn-sm" data-dismiss="modal">
										<i class="fa fa-times"></i>
										Cancelar
									</button>
								</div>
							</form>
						</div>
					</div><!-- fin modal -->
					<div id="modal-buscarEmpresa" class="modal" tabindex="-1">
						<div class="space-20"></div>
						<div class="modal-content col-md-6 col-md-offset-3" >
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<h4 class="blue bigger">Buscar Empresa</h4>
							</div>
					
							<div class="modal-body overflow-visible">
								<div class="row">				
									<div class="col-xs-12">
										<table id="tabla-empresas" class="table table-bordered table-hover table-condensed">
											<thead>
												<tr>
													<th class="small"></th>
													<th class="small">C&oacute;digo</th>
													<th class="small">Raz&oacute;n Social</th>										
													<th class="small">RUC</th>	
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>					
									</div>
								</div>																	
							</div>
					
							<div class="modal-footer">	
								<button type="button" id="btnSeleccionarEmpresa" class="btn btn-sm btn-primary" disabled="disabled">
									<i class="fa fa-check"></i>
									Seleccionar
								</button>									
								<button class="btn btn-sm" data-dismiss="modal">
									<i class="fa fa-times"></i>
									Cancelar
								</button>
							</div>
						</div>
					</div><!-- fin modal -->	
					<div id="modal-buscarPersona" class="modal" tabindex="-1">
						<div class="space-20"></div>
						<div class="modal-content col-md-6 col-md-offset-3" >
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<h4 class="blue bigger">Buscar Persona</h4>
							</div>
					
							<div class="modal-body overflow-visible">
								<div class="row">				
									<div class="col-xs-12">
										<table id="tabla-personas" class="table table-bordered table-hover table-condensed">
											<thead>
												<tr>
													<th class="small"></th>
													<th class="small">C&oacute;digo</th>
													<th class="small">Nombres</th>										
													<th class="small">DNI</th>	
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>					
									</div>
								</div>																	
							</div>
					
							<div class="modal-footer">	
								<button type="button" id="btnSeleccionarPersona" class="btn btn-sm btn-primary" disabled="disabled">
									<i class="fa fa-check"></i>
									Seleccionar
								</button>									
								<button class="btn btn-sm" data-dismiss="modal">
									<i class="fa fa-times"></i>
									Cancelar
								</button>
							</div>
						</div>
					</div><!-- fin modal -->
				</div>	
			</div>					
		</div><!-- /.page-content -->
			
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
		<script src="../../static/custom/jquery.dataTables.bootstrap.js" th:src="@{/static/custom/jquery.dataTables.bootstrap.js}"></script>
				
		<script type="text/javascript">
		// <![CDATA[

			var oTable;
		    var usuarioSelect;
		    		    
			jQuery(function($) {
												
				oTable = $('#tabla-usuarios').DataTable( {
					"bRetrieve": true,
					"bDestroy":true,
		 			"aoColumns": [	
		 			{ "sWidth": "5%", "bSortable": false, "sClass": "small vertical-center center" },
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" },		 			
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" },
		 			{ "sClass": "small vertical-center" }
		 			],
					"bPaginate": true,
					"aaSorting": [[1,'asc']],
					"sDom":
						"<'row'<'col-xs-6'><'col-xs-6'>r>"+
						"t"+
						"<'row'<'col-xs-4'i><'col-xs-4 center'l><'col-xs-4'p>>"
				} );
				
				$( "#botonLimpiar" ).click(function() {
					limpiar();				
				});
				
			    function limpiar(){
			    	$("#fUsuario").val('');
			    	$("#fTipo").val('Todos');
			    	$("#fDniRuc").val('');
			    	$("#fNombre").val('');
			    	$("#fCorreo").val('');			    	
			    	oTable.fnFilter('' , 1);
			    	oTable.fnFilter('' , 2);
			    	oTable.fnFilter('' , 3);
			    	oTable.fnFilter('' , 4);
			    	oTable.fnFilter('' , 5);
			    	oTable.fnFilter('' , 6);
			    	oTable.fnFilter('' , 7);
			    	anularSeleccion();
			    };
			    
			    function anularSeleccion(){
			    	$(".btnDisable").toggleClass('disabled', true);
			    	$('input:radio').prop('checked', false);
			    	usuarioSelect = '';
			    }
				
				$( "body" ).delegate( '#tabla-usuarios tbody tr', "click", function(){
					usuarioSelect = $("td:eq(1)", this).text();
					$(this).find('td input:radio').prop('checked', true);
					$(".btnDisable").toggleClass('disabled', false);
				});
				
				$("#fUsuario").on( 'keyup change', function () {
					 oTable.fnFilter( this.value, 1 );
					 anularSeleccion();
			    } );
				
				$("#fTipo").on( 'keyup change', function () {
					 oTable.fnFilter( this.value, 2 );
					 anularSeleccion();
			    } );
								
				$("#fDniRuc").on( 'keyup change', function () {
					 oTable.fnFilter( this.value, 4 );
					 anularSeleccion();
			    } );
				
				$("#fNombre").on( 'keyup change', function () {
					 oTable.fnFilter( this.value, 5 );
					 anularSeleccion();
			    } );
				
				$("#fCorreo").on( 'keyup change', function () {
					 oTable.fnFilter( this.value, 6 );
					 anularSeleccion();
			    } );						

				$( "#btnBaja" ).click(function() {
					 var usuario = $('input[name="chkUsuario"]:checked', oTable.fnGetNodes()).map(function () {
					  				return this.value;
					 				}).get();
					 if(usuario.length > 0){
						 $( "#submitIdBaja").val(usuario);
						 $('#modal-baja').modal('show');						
					 } else {
						 alert("Debe seleccionar al menos un usuario");
					 }					 
			  	} );
								
				$( "#btnCambiarPassword" ).click(function() {
					 var usuario = $('input[name="chkUsuario"]:checked', oTable.fnGetNodes()).map(function () {
					  				return this.value;
					 				}).get();
					 if(usuario.length > 0){
						 $( "#submitIdCambiarPassword").val(usuario);
						 $('#modal-cambiarPassword').modal('show');
					 } else {
						 alert("Debe seleccionar al menos un usuario");
					 }					 
			  	} );
				
				$( "#btnConfirmarCambioPassword" ).click(function() {
					 var usuario = $('input[name="chkUsuario"]:checked', oTable.fnGetNodes()).map(function () {
					  				return this.value;
					 				}).get();
					 if(usuario.length > 0){
						 if($('#password').val()){
							 $('#modal-cambiarPassword').modal('hide');	
							 $('#formCambiarPassword').submit();
						 } else {
							 alert("La contrase\u00f1a no debe estar vac\u00eda");
						 }				 
					 } else {
						 alert("Debe seleccionar al menos un usuario");
					 }					 
			  	} );				

				$( "#btnNuevoUsuario" ).click(function() {
					$('#modal-usuario').modal('show');
					$('#tituloModalUsuario').text("Registrar Usuario");
					$("#campoPassword").prop('required',true);
					$('#formSubmitUsuario').attr('action', '/seg/registrarUsuario');
			  	} );
				
				$( "#btnEditarUsuario" ).click(function() {
					 var usuario = $('input[name="chkUsuario"]:checked', oTable.fnGetNodes()).map(function () {
					  				return this.value;
					 				}).get();
					 if(usuario.length > 0){
						 var index = $('input[name="chkUsuario"]:checked', oTable.fnGetNodes()).closest('tr').index();
						 $('#modal-usuario').modal('show');
						 $('#tituloModalUsuario').text("Editar Usuario");
						 $('#divPassword').hide();					
						 $('#formSubmitUsuario').attr('action', '/seg/editarUsuario');
						 $('#campoId').val(usuario);
						 $("#campoPassword").val('default');
						 $('#campoLogin').val($('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(1)').text());
						 $('#campoCorreo').val($('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(6)').text());
						 $('#campoPerfil').val($('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(9)').text());
						 var tipo = $('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(2)').text();
						 $('#campoTipo').val(tipo);
						 if(tipo == 'Persona'){
							 $("#divPersona").removeClass( "noDisplay" );
							 $('#inputPersona').val($('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(8)').text());
						 } else if (tipo == 'Empresa'){
							 $("#divEmpresa").removeClass( "noDisplay" );
							 $('#inputEmpresa').val($('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(8)').text());
						 }
						 if($('#tabla-usuarios').find("tbody tr").eq(index).find('td:eq(7)').find('i').hasClass( "fa" )){
							 $('#campoActivo').prop('checked', true);
						 } else {
							 $('#campoActivo').prop('checked', false);
						 }
						 
					 } else {
						 alert("Debe seleccionar al menos un usuario");
					 }					 
			  	} );
				
				$('#modal-usuario').on('hidden.bs.modal', function () {
					$('#divPassword').show();
					$("#campoPassword").prop('required',false);
					$("#campoPassword").val('');
					$('#campoId').val('');						 
					$('#campoLogin').val('');
					$('#campoCorreo').val('');
					$('#campoPerfil').val(1);
					$('#campoTipo').val('Otro');
					$("#divPersona").addClass( "noDisplay" );
					$("#divEmpresa").addClass( "noDisplay" );
					$("#inputPersona").val('');
					$("#inputEmpresa").val('');
					$('#campoActivo').prop('checked', false);	
					$('#divError').hide();
				})
				
				if($('#flagErrorNuevo').val()){
					$('#modal-usuario').modal('show');
					$('#tituloModalUsuario').text("Registrar Usuario");
					$("#campoPassword").prop('required',true);
					$('#formSubmitUsuario').attr('action', '/seg/registrarUsuario');
				}
				
				if($('#flagErrorEdicion').val()){
					$('#modal-usuario').modal('show');
					$('#tituloModalUsuario').text("Editar Usuario");
					$('#divPassword').hide();
					$("#campoPassword").val('default');
					$('#formSubmitUsuario').attr('action', '/seg/editarUsuario');
				}
			})
			// ]]>
		</script>
		
		<script th:inline="javascript">
		// <![CDATA[
		            
		$(document).ready(function() {	
			
			var tablaEmpresa;
			var empresaSelect;
			var tablaPersona;
			var personaSelect;
			
			//Fix para checkbox ace
			$(function(){
	  			$('input[type=checkbox],input[type=radio]').after('<span class="lbl" />');
			});					
					
			$('input,select').keypress(function(event) { return event.keyCode != 13; });	
			
			$("#campoTipo").on( 'change', function () {
				if(this.value == 'Persona'){
					$("#divPersona").removeClass( "noDisplay" );
					$("#divEmpresa").addClass( "noDisplay" );
					$("#inputEmpresa").val('');
				} else if(this.value == 'Empresa'){
					$("#divPersona").addClass( "noDisplay" );
					$("#divEmpresa").removeClass( "noDisplay" );
					$("#inputPersona").val('');
				} else {
					$("#divPersona").addClass( "noDisplay" );
					$("#divEmpresa").addClass( "noDisplay" );
					$("#inputPersona").val('');
					$("#inputEmpresa").val('');
				}
		    } );
			
			$("#btnBuscarEmpresa, #inputEmpresa").on( 'click', function () {
				$("#modal-buscarEmpresa").modal('show');
	    		if(tablaEmpresa == null){
	    			tablaEmpresa = $('#tabla-empresas').dataTable( {
						"bRetrieve": true,
						"bDestroy":true,
						"bPaginate": true,
						"bProcessing": true,
						"sAjaxSource": "/seg/getEmpresasJson",
						"aoColumns": [	
							 			{ "bSortable": false, "sClass": "small center" },
							 			{ "sClass": "small vertical-center" },
							 			{ "sClass": "small vertical-center" },
							 			{ "sClass": "small vertical-center" }
							 		 ],
						"aaSorting": [[1,'asc']],
						"sDom":
							"<'row'<'col-xs-6'r><'col-xs-6'>f>"+
							"t"+
							"<'row'<'col-xs-6'i><'col-xs-6'p>>"
					} );
	    		}
		    } );
			
			$( "body" ).delegate( '#tabla-empresas tbody tr', "click", function(){
				empresaSelect = $("td:eq(1)", this).text();
				$(this).find('td input:radio').prop('checked', true);
				$("#btnSeleccionarEmpresa").prop("disabled", false);
			});
			
			$('#btnSeleccionarEmpresa').click(function(){
				if(empresaSelect != null && empresaSelect.length > 0){
					$('#inputEmpresa').val(empresaSelect);
					$('#modal-buscarEmpresa').modal('hide');
				} else {
					alert("Debe seleccionar una empresa");
				}			
			});
			
			$("#btnBuscarPersona, #inputPersona").on( 'click', function () {
				$("#modal-buscarPersona").modal('show');
	    		if(tablaPersona == null){
	    			tablaPersona = $('#tabla-personas').dataTable( {
						"bRetrieve": true,
						"bDestroy":true,
						"bPaginate": true,
						"bProcessing": true,
						"sAjaxSource": "/seg/getPersonasJson",
						"aoColumns": [	
							 			{ "bSortable": false, "sClass": "small center" },
							 			{ "sClass": "small vertical-center" },
							 			{ "sClass": "small vertical-center" },
							 			{ "sClass": "small vertical-center" }
							 		 ],
						"aaSorting": [[1,'asc']],
						"sDom":
							"<'row'<'col-xs-6'r><'col-xs-6'>f>"+
							"t"+
							"<'row'<'col-xs-6'i><'col-xs-6'p>>"
					} );
	    		}
		    } );
			
			$( "body" ).delegate( '#tabla-personas tbody tr', "click", function(){
				personaSelect = $("td:eq(1)", this).text();
				$(this).find('td input:radio').prop('checked', true);
				$("#btnSeleccionarPersona").prop("disabled", false);
			});
			
			$('#btnSeleccionarPersona').click(function(){
				if(personaSelect != null && personaSelect.length > 0){
					$('#inputPersona').val(personaSelect);
					$('#modal-buscarPersona').modal('hide');
				} else {
					alert("Debe seleccionar una persona");
				}			
			});
						 
		});
			// ]]>
		</script>	
	</body>
</html>